<script setup>
	import {
		useCartStore
	} from '@/stores/cart.js'
	import {
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import {
		computed,
		ref,
		watch
	} from "vue";
	const cartStore = useCartStore()
	// 仅在此页面，动态设置徽标
	const rTotalCnt = computed(() => useCartStore().totalCnt)
	let isCartPage = false
	const setBadge = () => uni.setTabBarBadge({
		index: 2,
		text: rTotalCnt.value + ''
	})
	watch(rTotalCnt, () => (isCartPage && setBadge()))
	onShow(() => {
		setBadge()
		isCartPage = true
	})
	onHide(() => (isCartPage = false))
	// 使用计算属性，响应化仓库数据(真的有必要吗？)
	const rCartList = computed(() => useCartStore().cartList)
	// 处理点击选择框事件
	const dealRadioChange = e => cartStore.updateGoodsState(e)
	// 处理点击数量框事件
	const dealCntChange = e => cartStore.updateGoodsCount(e)
	// 处理左滑唤出删除按钮
	const rightSwipeOptions = ref([{
		text: "删除",
		style: {
			backgroundColor: '#C00000'
		}
	}])
	// 处理删除按钮的实际业务
	const dealDelGoods = goods => cartStore.removeGoods(goods.goods_id)
</script>
<template>
	<!-- 收货地址组件 -->
	<my-address></my-address>
	<!-- 头部区域 -->
	<view class="cart-title">
		<uni-icons type="shop" size="20"></uni-icons>
		<!-- 文本 -->
		<text class="cart-title-text">购物车</text>
	</view>
	<!-- cart-list -->
	<view v-if="cartStore.cartList.length">
		<view class="cart-list">
			<uni-swipe-action>
				<view v-for="(e1, i1) in rCartList" :key="i1">
					<uni-swipe-action-item :right-options="rightSwipeOptions" @click="dealDelGoods(e1)">
						<goods-item :goods="e1" :withRadio="true" :withCounter="true" @radioChange="dealRadioChange"
							@cntChange="dealCntChange"></goods-item>
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>
		</view>
		<my-settle></my-settle>
	</view>
	<view class="empty-cart-box" v-else>
		<image src="/static/cart_empty@2x.png" mode="" class="empty-cart-img"></image>
		<text class="empty-cart-text">这里什么也没有哦~</text>
	</view>
</template>


<style lang="scss">
	.cart-title {
		height: 40px;
		display: flex;
		align-items: center;
		padding: 6px;
		border-bottom: 1px solid #efefef;
		background-color: #fff;

		.cart-title-text {
			margin-left: 12px;
		}
	}

	.empty-cart-box {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100px;

		.empty-cart-img {
			width: 100px;
			height: 100px;
		}

		.empty-cart-text {
			margin-top: 20px;
			font-size: 13px;
			color: gray;
		}
	}
</style>